<template>
    <div class="update-box">
        <div class="questions-head">
            <div class="option">所属课程<el-select v-model="quesHeadData.belongCourseId" class="select" placeholder="请选择课程"
                    size="small">
                    <el-option v-for="item in quesHeadData.courses" :label="item.label" :value="item.value" />
                </el-select></div>
            <div class="option">试题类型<el-select :disabled="true" v-model="quesHeadData.quesType" class="select"
                    placeholder="请选择题型" size="small">
                    <el-option v-for="item in categories" :label="item.label" :value="item.value" />
                </el-select></div>
            <div class="option">试题难度<el-select v-model="quesHeadData.difficultLevel" class="select" placeholder="请选择难度"
                    size="small">
                    <el-option v-for="item in difficulties" :label="item.label" :value="item.value" />
                </el-select></div>
            <div class="option">知识点<el-select v-model="quesHeadData.knowledge" multiple collapse-tags
                    collapse-tags-tooltip :max-collapse-tags="3" class="multiple-select" placeholder="请选择知识点"
                    size="small">
                    <el-option v-for="item in quesHeadData.knowledgeName" :label="item.knowledgeName"
                        :value="item.knowledgeId" class="multiple-option" />
                </el-select></div>
        </div>
        <choice v-if="quesHeadData.quesType == 0" :childData="childData" />
        <tianKong v-if="quesHeadData.quesType == 1" :childData="childData" />
        <tureFalse v-if="quesHeadData.quesType == 2" :childData="childData" />
        <shortAnswer v-if="quesHeadData.quesType == 3" :childData="childData" />
        <material v-if="quesHeadData.quesType == 4" :childData="childData" />
        <div class="info4">
            <el-button type="primary" class="button" @click="updateBank">保存</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { getqueryBankAPI, getCourseListAPI, updateBankAPI, getBatchPointAPI } from '@/api/api'
import { useRoute, useRouter } from 'vue-router';
import choice from './questions/choice.vue';
import tianKong from './questions/tianKong.vue';
import tureFalse from './questions/tureFalse.vue';
import shortAnswer from './questions/shortAnswer.vue';
import material from './questions/material.vue';
import { ElMessage } from 'element-plus';

const route = useRoute()
const router = useRouter()

const quesHeadData = ref({
    //题目类型
    quesType: '',
    //所属课程
    belongCourseId: '',
    //难度
    difficultLevel: '',
    //获取到的所有课程
    courses: [],
    //课程列表
    courseList: [],
    //知识点
    knowledge: [],
    //知识点（名+id）
    knowledgeName: [],
})

const childData = ref()
const knowledgeData = ref([])

//难度
let difficulties = reactive([
    {
        label: "简单",
        value: 0,
    },
    {
        label: "中等",
        value: 1
    },
    {
        label: "困难",
        value: 2
    },
])
//题型
let categories = reactive([
    {
        label: "选择题",
        value: 0,
    },
    {
        label: "填空题",
        value: 1,
    },
    {
        label: "判断题",
        value: 2,
    },

    {
        label: "简答题",
        value: 3,
    },
    {
        label: "材料题",
        value: 4,
    },
])

onMounted(() => {
    //获取题目信息
    getqueryBank(route.query.id)
    //获取课程
    getCourseList()
    //获取知识点
    getBankListCourse(sessionStorage.getItem('courseId'))
})
//根据课程查询知识点
const getBankListCourse = async (id) => {
    console.log(id, 'id');
    const keyWord = ''
    await getBatchPointAPI(id, 1, 20, keyWord).then(res => {
        if (res.data.code == 200) {
            knowledgeData.value = res.data.data.list
            getKnowledgeName(knowledgeData.value)
        }
    })
}
//获取知识点名
const getKnowledgeName = (knowledge) => {
    for (let item of knowledge) {
        quesHeadData.value.knowledgeName.push({
            knowledgeName: item.knowledgeName,
            knowledgeId: item.konwledgeId
        })
    }
}
//查询题目
const getqueryBank = async (questionId) => {
    await getqueryBankAPI(questionId).then(res => {
        if (res.data.code == 200) {
            if (res.data.data.questionType == 0 || res.data.data.questionType == 1 || res.data.data.questionType == 2) {
                res.data.data.questionAnswer = JSON.parse(res.data.data.questionAnswer)
            }
            res.data.data.optionsList = JSON.parse(res.data.data.optionsList)
            //题目信息给childData
            childData.value = res.data.data
            console.log(childData.value, 'childData.value变化了,可以监听了');

            const data = res.data.data
            quesHeadData.value.belongCourseId = data.belongCourseId
            quesHeadData.value.quesType = data.questionType
            quesHeadData.value.difficultLevel = data.difficultLevel
            quesHeadData.value.knowledge = data.knowledge
            console.log(data.belongCourseId, 'data.belongCourseId');
        }
    })
}
//查询课程
const getCourseList = async () => {
    await getCourseListAPI().then(res => {
        if (res.data.code == 200) {
            quesHeadData.value.courseList = res.data.data.list
            getCourseName(quesHeadData.value.courseList)
        }
    })
}
//获取课程名
const getCourseName = (courseList) => {
    for (let item of courseList) {
        quesHeadData.value.courses.push({
            label: item.courseName,
            value: item.id
        })
    }
}

//更新题目
const updateBank = async () => {
    const data = JSON.parse(JSON.stringify(childData.value))
    if (data.quesType == 0) {
        if (data.questionAnswer.length == 1) {
            data.isSingleSelect = 0
        } else {
            data.isSingleSelect = 1
        }
    }
    data.questionAnswer = JSON.stringify(data.questionAnswer)
    data.optionsList = JSON.stringify(Object.assign([], data.optionsList))
    data.outOfOrder = Number(data.outOfOrder)
    data.difficultLevel = quesHeadData.value.difficultLevel
    data.knowledge = quesHeadData.value.knowledge
    data.belongCourseId = quesHeadData.value.belongCourseId
    console.log(data, 'data');
    await updateBankAPI(data).then(res => {
        if (res.data.code) {
            ElMessage.success('更新题目成功')
            router.push({
                path: '/adminHome/question',
            })
        }
    })
}


</script>

<style lang="less" scoped>
.update-box {
    padding: 10px 130px;
    margin: 15px 0px 0 0;
    background-color: #fff;
    border-radius: 15px;

    .questions-head {
        display: flex;
        margin: 10px;
        font-size: small;
        border-bottom: 1px solid rgb(243, 242, 242);

        .option {
            padding: 10px;

            .select {
                width: 100px;
                padding: 5px;
            }

            .multiple-select {
                width: 240px;
                padding: 5px;
            }
        }
    }

    .info4 {
        display: flex;
        justify-content: center;

        .button {
            width: 100px;
            padding: 15px;
            margin-bottom: 10px;
        }
    }
}
</style>